<template>
    <el-dialog
        class="dialog"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            class="form-bwrap form-layer-top"
            labelPosition="top"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="租约编号:" prop="lease_no">
                <el-input
                    v-model="formData.lease_no"
                    clearable
                    maxlength="20"
                    placeholder="请输入租约编号"
                ></el-input>
            </el-form-item>
            <el-form-item label="新增房屋:" prop="area_sn">
                <el-select placeholder="请选择楼栋" v-model="build_sn">
                    <el-option
                        v-for="item in treeData"
                        :key="item.build_sn"
                        :label="item.build_name"
                        :value="item.build_sn"
                    ></el-option>
                </el-select>
                <el-select placeholder="请选择房屋" v-model="area_sn">
                    <el-option
                        v-for="item in areaData"
                        :key="item.area_sn"
                        :label="item.area_no"
                        :value="item.area_sn"
                    ></el-option>
                </el-select>
                <el-button
                    class="btn-site"
                    icon="el-icon-plus"
                    @click="onAddClick"
                    :disabled="!isAdd"
                ></el-button>
            </el-form-item>
            <el-divider>房间信息</el-divider>
            <vxe-grid
                class="ml_20"
                ref="xTable"
                v-bind="gridConfig"
                :data="tableList.data"
                :columns="tableList.column"
            >
                <template v-slot:operation="{ row }">
                    <zb-btn-group
                        :btns="tableList.btns"
                        :data="row"
                    ></zb-btn-group>
                </template>
            </vxe-grid>
            <el-divider>租约信息</el-divider>
            <el-form-item label="租约有效期:" prop="lease_date">
                <el-date-picker
                    v-model="formData.lease_date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="押金:" prop="pledge_fee">
                <el-input-number
                    v-model="formData.pledge_fee"
                    :min="0"
                    placeholder="请输入押金"
                ></el-input-number
                >&nbsp;元
            </el-form-item>
            <el-form-item label="租金(元/月):" prop="lease_fee">
                <el-input-number
                    v-model="formData.lease_fee"
                    :min="0"
                    placeholder="请输入租金"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="物业费(元/月):" prop="wy_fee">
                <el-input-number
                    v-model="formData.wy_fee"
                    :min="0"
                    placeholder="请输入物业费"
                ></el-input-number>
            </el-form-item>
            <el-divider>客户信息</el-divider>
            <el-form-item label="租户名称:" prop="tenant_sn">
                <el-input
                    v-model="selectUser.tenant_name"
                    placeholder="请选择租户"
                    readonly
                ></el-input>
                <el-button
                    class="btn-site"
                    icon="el-icon-zoom-in"
                    @click="showDialog('dialogForm')"
                ></el-button>
            </el-form-item>
            <el-form-item label="联系人:">
                <el-input v-model="selectUser.contact_name" readonly></el-input>
            </el-form-item>
            <el-form-item label="证件号码:">
                <el-input
                    v-model="selectUser.certificate_num"
                    readonly
                ></el-input>
            </el-form-item>
            <el-form-item label="联系电话:">
                <el-input v-model="selectUser.contact_tel" readonly></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmitBefore"
                >确 定</el-button
            >
        </div>
        <dialogForm
            ref="dialogForm"
            @select="onSelect"
            @closeDialog="onCloseDialog"
        ></dialogForm>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import { mixinDialogParent } from "@/mixin/dialog/Parent";
import { mixinNext } from "@/mixin/Next";
import dialogForm from "./Select.vue";
import { filter, find, map, cloneDeep, unset } from "lodash";
@Component({
    name: "RentContractEdit",
    mixins: [mixinDialogForm, mixinNext, mixinDialogParent],
    components: {
        dialogForm
    }
})
export default class RentContractEdit extends Vue {
    @Action("rentContract/add") itemAdd: any;
    @Action("rentContract/edit") itemEdit: any;

    @Action("houseBuildings/tree") getTree: any;
    @Getter("houseBuildings/tree") treeData: any;
    @Action("houseRoom/list") getTist: any;

    @Action("sharing/roomDictionary") getDictionary: any;
    @Getter("sharing/rentContractType") typeData: any;
    @Getter("sharing/roomAreaType") areaTypeData: any;
    @Getter("sharing/renovation") renovationData: any;
    init({
        area_json,
        start_date,
        end_date,
        tenant_name,
        contact_name,
        certificate_num,
        contact_tel,
        ...data
    }: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
        me.formData.lease_date = [start_date, end_date];
        me.tableList.data = area_json;
        me.selectUser = {
            tenant_name,
            contact_name,
            certificate_num,
            contact_tel
        };
    }

    created() {
        this.getDictionary();
    }
    mounted() {
        this.getTree();
    }
    formData: any = {
        tenant_sn: "",
        lease_no: "",
        tenant_type: "",
        certificate_num: "",
        contact_name: "",
        area_sn: "",
        pledge_fee: "",
        lease_fee: "",
        wy_fee: ""
    };
    // 表单验证
    rules: any = {
        lease_no: [
            {
                required: true,
                message: "请输入租约编号"
            }
        ],
        lease_date: [
            {
                required: true,
                message: "请选择租约有效期"
            }
        ],
        tenant_sn: [
            {
                required: true,
                message: "请选择租户"
            }
        ],
        area_sn: [
            {
                required: true,
                message: "请选择房间"
            }
        ]
    };
    build_sn: any = "";
    area_sn: any = "";
    areaData: any = [];
    // 选中组织时获取岗位列表
    @Watch("build_sn")
    updateDeptId(v: any) {
        const me = this as any;
        me.updateNext(
            me.getTist,
            { build_sn: v, page: 1, per_page: 9999 },
            "areaData",
            "area_sn"
        );
    }
    // 列表配置
    gridConfig: any = {
        // 列对齐方式 居中对齐
        align: "center",
        class: "grid",
        // 当内容过长时显示为省略号
        // tooltip 在火狐中有兼容问题
        showOverflow: "title",
        // 显示边框
        border: "full",
        // 列表头宽度调整
        resizable: true,
        // 鼠标移到行是否要高亮显示
        "highlight-hover-row": true
    };
    // 列表配置
    tableList: any = {
        data: [],
        column: [
            {
                title: "房号",
                field: "area_no",
                minWidth: 180
            },
            {
                title: "类型",
                field: "area_type",
                minWidth: 80,
                formatter: this.formatterAreaType
            },
            {
                title: "房间建筑面积",
                field: "area_size",
                minWidth: 125,
                formatter: function ({ cellValue }: any) {
                    return cellValue + "m²";
                }
            },
            {
                title: "租赁报价",
                field: "rental_price",
                minWidth: 100
            },
            {
                title: "装修类型",
                field: "renovation_type",
                minWidth: 100,
                formatter: this.formatterRenovationType
            },
            {
                showOverflow: "ellipsis",
                fixed: "right",
                title: "操作",
                slots: {
                    default: "operation"
                },
                headerAlign: "center",
                align: "left",
                width: 60
            }
        ],
        btns: [
            {
                label: "删除",
                handleClick: this.onDelClick
            }
        ]
    };

    formatterAreaType({ cellValue }) {
        return find(this.areaTypeData, function (data) {
            return data.value.toString() == cellValue.toString();
        }).label;
    }
    formatterRenovationType({ cellValue }) {
        return find(this.renovationData, function (data) {
            return data.value.toString() == cellValue.toString();
        }).label;
    }
    isAdd: boolean = false;
    get bigData() {
        return {
            area_sn: this.area_sn,
            data: this.tableList.data
        };
    }
    @Watch("bigData")
    updateBigData({ area_sn, data }: any) {
        const me = this as any;
        let is = false;
        if (area_sn) {
            is = !find(data, { area_sn });
        }
        me.isAdd = is;
        me.formData.area_sn = map(data, "area_sn").toString();
    }
    onAddClick() {
        const me = this as any,
            item = find(me.areaData, { area_sn: me.area_sn });
        me.tableList.data.push(item);
    }
    onDelClick({ area_sn }: any) {
        this.tableList.data = filter(this.tableList.data, function (item: any) {
            return item.area_sn != area_sn;
        });
    }

    selectUser: any = {};
    onSelect(row: any) {
        this.selectUser = row;
        this.formData.tenant_sn = row.tenant_sn;
    }

    onSubmitBefore() {
        const me = this as any,
            form = me.$refs.form;
        form.validate((valid: any) => {
            if (valid) {
                const values = cloneDeep(me.formData),
                    time = values.lease_date;
                values.lease_start_date = time[0];
                values.lease_end_date = time[1];
                values.area_sn = values.area_sn.split(",");
                unset(values, "lease_date");
                me.onSubmitByData(values);
            }
        });
    }
    closeBefore() {
        this.selectUser = {};
        this.tableList.data = [];
    }
    // 标题
    get title() {
        return (this as any).isEdit ? "修改租约" : "新建租约";
    }
}
</script>